<template>
    <div>
      <div>
        <el-table :data="tableData0">
          <el-table-column label="课程名" align="center" prop="name" />
          <el-table-column label="课程号" align="center" prop="classId"/>
          <el-table-column label="教师id" align="center" prop="teacherId" />
          <el-table-column label="编辑" align="center">
            <template slot-scope="scope">
              <el-button @click="classEdit(scope.row)" type="text" size="small">编 辑</el-button>
              <el-button @click="classDelete(scope.row.classId)" type="text" size="small">删 除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>


      <el-form :model="queryParams">
        <el-input
          v-model="queryParams.teacherId"
          placeholder="请输入教师id"
        />
        <el-button type="primary" icon="el-icon-search" size="mini" @click="A">通过教师id查询课程</el-button>
        <el-input
          v-model="queryParams.studentId"
          placeholder="请输入学生id"
        />
        <el-button type="primary" icon="el-icon-search" size="mini" @click="B">通过学生id查询课程</el-button>

      </el-form>


      <div>
        <el-table :data="tableData1">
          <el-table-column label="课程名" align="center" prop="name" />
          <el-table-column label="课程号" align="center" prop="classId"/>
          <el-table-column label="教师id" align="center" prop="teacherId" />
        </el-table>
      </div>

      <div>
        <el-table :data="tableData2">
          <el-table-column label="课程名" align="center" prop="name" />
          <el-table-column label="课程号" align="center" prop="classId"/>
          <el-table-column label="教师id" align="center" prop="studentId" />
        </el-table>
      </div>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="classAdd">新增课程</el-button>
      <el-dialog title="外层 Dialog" :visible.sync="dialogFormVisible" width="30%" size="small">
        <el-form label-width="120px">
          <el-form-item label="课程名">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>



<script>

  import { listAll, getListT,getListS,saveClass} from "@/api/teacher";

    export default {
        name: "teacher",
      created() {
        listAll().then(response => {
          this.tableData0   = response
        })
      },
      data(){
        return {
          dialogFormVisible:false,
          form:{},
          tableData0:{
            name: undefined,
            classId:undefined,
            teacherId:undefined
          },
          tableData1:{
              name: undefined,
            classId:undefined,
            teacherId:undefined
          },
          tableData2:{
            name: undefined,
            classId:undefined,
            studentId:undefined
          },
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            teacherId: null,
          }
        }
      },
      methods: {
        A() {
          getListT(this.queryParams.teacherId).then(response =>{
            this.tableData1  = response
            }
          );
        },
        B() {
          getListS(this.queryParams.studentId).then(response =>{
            this.tableData2  = response
          })
        },
        classAdd(){
          this.dialogFormVisible = true,
            this.form = {}
        },
        save(){
            saveClass(this.form).then(response =>{
             if (response.code === 200){
               this.$message.success("添加课程成功")
               this.dialogFormVisible = false
                 this.load()
             }else {
               this.$message.error("添加课程失败")
             }
            })
        },
        classEdit(row){
          this.form = row
           this.dialogFormVisible = true
        },
        classDelete(id){

        }
      }
    }
</script>

<style scoped>

</style>
